<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <link rel="stylesheet" href="/static/chat.css">
  <script>
  function createXMLHttpRequest() {
   try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
   try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
   try { return new XMLHttpRequest(); } catch(e) {}
   return null;
 }  
  
   function astarta() {
    name = document.getElementById('nickname').value
    join(name);
    e = document.getElementById('events')
    e.src='/ajax|' + name
   }
   
   function join(user) {
       xmlhttp = createXMLHttpRequest();
       xmlhttp.open("GET", "/join?user=" + user, false)
       xmlhttp.send(null);
    }
   
   function chat() {
       xmlhttp = createXMLHttpRequest();
       msg = document.getElementById('chat').value
       xmlhttp.open("GET", "/msg?user=" + document.getElementById('nickname').value + "&msg=" + msg, false)
       xmlhttp.send(null);
   }
   
   function event(data) {
        chat_box = document.getElementById('box')
        div = window.parent.document.createElement('div')
        div.className = "event"
        div.innerHTML = data
        chat_box.appendChild(div)
        chat_box.scrollTop = chat_box.scrollHeight;
    }
   
  </script>
 </head>
  
 <body>
<input type=text id=nickname>
<input type=button value=nickname name=ablak onclick="astarta();">
  <div class="who">
  </div>
   
  <div id="box">   
  </div>
  <input type=text id=chat> <input type=submit value="chat" onClick="chat();">
  <br>
  <br>
  <iframe style="width:400px; height: 400px;" id="events"></iframe>
 </body>
  
</html>
